<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style>
        .layuimini-main{
            padding: 10px;
            padding-top:30px;
        }
        .top a{
            color:yellow;
        }
        .layui-top-box {padding:40px 20px 20px 20px;color:#fff}
        .panel {margin-bottom:17px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:15px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
    </style>

</head>
<body>
<!--<div class="top" >超链接：-->
<!--    <a href="../person/personPay.html">单个员工工资填报</a>|-->
<!--    <a href="../project/projectCompSendList.html">工资填报结果查询</a>-->
<!--</div>-->
<div class="layuimini-main">

    <div style="margin-top: -20px;">
        <from class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: auto;">民工姓名</label>
                    <div class="layui-input-inline" style="width: 130px;">
                        <input type="text" id="name" name="name" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label" style="width: auto;">身份证号</label>
                    <div class="layui-input-inline" style="width: 130px;">
                        <input type="text" id="number" name="number" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-normal" data-type="search" id="btnSearch">查询</button>
                </div>
            </div>
        </from>

        <table class="layui-table" lay-filter="tbFliter" id="tbData" style="margin-top: -25px;">
        </table>
    </div>

    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10">

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-cyan">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-blue">实时</span>
                                <h5>在建项目(个)</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins" id="zjNum">0</h1>
<!--                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 10</div>-->
<!--                                <small>当前分类总记录数</small>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-blue">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-cyan">实时</span>
                                <h5>竣工项目(个)</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins" id="jgNum">0</h1>
<!--                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 4</div>-->
<!--                                <small>当前分类总记录数</small>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-green">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-orange">实时</span>
                                <h5>在职工人总数(人)</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins" id="zzPersonNum">0</h1>
<!--                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 100</div>-->
<!--                                <small>当前分类总记录数</small>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-orange">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>已下发工资总数(元)</h5>
                            </div>
                            <div class="panel-content">
                                <h1 class="no-margins" id="payNum">0</h1>
<!--                                <div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 5</div>-->
<!--                                <small>当前分类总记录数</small>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-dataset" style="min-height:400px;padding: 10px;border:1px solid #00D6E8;border-radius: 10px;padding: 10px;"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-map" style="min-height:400px;padding: 10px;border:1px solid #00D6E8;border-radius: 10px;padding: 10px;"></div>
        </div>
    </div>
</div>
<!--</div>-->
<script src="../assets/layui/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    var echartsDataset;
    var echartsMap;

    layui.use(['layer', 'echarts','table'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            table = layui.table,
            echarts = layui.echarts;

        setInterval(function(){ init(); }, 5*60*1000);
        echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');
        echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');
        init();
        function init(){
            projectInfo();
            getBarData();
            getBarRData();
        }

        table.render({
            elem: '#tbData'
            , skin: 'row'
            , url: '../project/personlist'
            , page: true
            , cols: [[
                {field: 'id', title: '序号'}
                ,{field: 'name', title: '姓名'}
                ,{field: 'sex', title: '性别',
                    templet: function (e) {
                        if (e.sex == "0") {
                            return "男";
                        } else if (e.sex == "1") {
                            return "女";
                        }
                    }}
                ,{field: 'number', title: '身份证号'}
                ,{field: 'phone', title: '电话'}
                ,{field: 'adress', title: '籍贯'}
                , {field: 'create_user', title: '创建者'}
                , {
                    field: 'operation', title: '操作',fixed: 'right',fixed: 'right',
                    templet: function (e) {
                        var html = '';
                        html += ' <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>';
                        html += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        return html;
                    }
                }
            ]]
            , limits: [10, 20, 50]
            , where: {
                name: $("#name").val(),
                number: $("#number").val()
            }
            , id: 'tbOptions'
        });

        function projectInfo() {
            $.ajax({
                url: "../page/proinfo",
                dataType: "json",
                type:"post",
                success: function (rtn) {
                    if (rtn && rtn.code===0) {
                        $("#zzPersonNum").html(rtn.data.zzPersonNum);
                        $("#jgNum").html(rtn.data.jgNum);
                        $("#zjNum").html(rtn.data.zjNum);
                        $("#payNum").html(rtn.data.payNum.toLocaleString());
                    }
                }
            });
        }
        /**
         * 柱状图 1
         */
        function getBarData() {
            $.ajax({
                url: "../page/getBarData?type=Bar",
                dataType: "json",
                type:"post",
                success: function (rtn) {
                    if (rtn && rtn.code===0) {
                        barRecords(rtn.data);
                    }
                }
            });
        }
        function barRecords(data) {
            var yfData=new Array();
            var sfData=new Array();
            for(j = 0,len= data.yfData.length; j < len; j++) {
                yfData.push(data.yfData[j]/10000);
                sfData.push(data.sfData[j]/10000);
            }

            var optionDataset = {
                title: {
                    text: '各月总工资下发情况',
                    textStyle:{
                        color:"#fff"
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    right: '10px',
                    textStyle:{
                        color:"#fff"
                    },
                    data: ['应发工资','实发工资']
                },
                dataZoom: [
                    {
                        type: "slider",
                        textStyle:{
                            color:"#fff"
                        },
                        bottom:0,
                        realtime: true, //拖动滚动条时是否动态的更新图表数据
                        height: 12, //滚动条高度
                        start: 50, //滚动条开始位置（共100等份）
                        end: 100 //结束位置（共100等份）
                    },
                    {
                        type: "inside",
                        realtime: true, //拖动滚动条时是否动态的更新图表数据
                        height: 12, //滚动条高度
                        start: 50, //滚动条开始位置（共100等份）
                        end: 100 //结束位置（共100等份）
                    }
                ],
                xAxis: [
                    {
                        type: 'category',
                        data:data.xAxis,
                        axisLabel: {    //重点在这一块，其余可以忽略
                            interval: 0,   //这个一定要有，别忘记了
                            rotate: 25,
                            textStyle: {
                                color: '#fff',
                                fontSize: 10
                            }
                        },
                        splitLine :{    //网格线
                            show:false //隐藏或显示
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '工资(万元)',
                        min: 0,
                        axisLabel: {
                            formatter: '{value} '
                        }
                    }
                ],
                series: [
                    {
                        name: '应发工资',
                        type: 'bar',
                        data: yfData,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return '#44A6DF'
                                }
                            }
                        }
                    },
                    {
                        name: '实发工资',
                        type: 'bar',
                        data: sfData,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return '#009688'
                                }
                            }
                        }
                    }
                ]
            };
            echartsDataset.setOption(optionDataset);
        }

        /**
         * 柱状图 2
         */
        function getBarRData() {
            $.ajax({
                url: "../page/getBarData?type=BarR",
                dataType: "json",
                type:"post",
                success: function (rtn) {
                    if (rtn && rtn.code===0) {
                        barRecordsR(rtn.data);
                    }
                }
            });
        }
        function barRecordsR(data) {
            var yfData=new Array();
            var sfData=new Array();
            for(j = 0,len= data.yfData.length; j < len; j++) {
                yfData.push(data.yfData[j]/10000);
                sfData.push(data.sfData[j]/10000);
            }
            var optionMap = {
                title: {
                    text: '当月各项目工资下发情况',
                    textStyle:{
                        color:"#fff"
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                legend: {
                    right: '10px',
                    textStyle:{
                        color:"#fff"
                    },
                    data: ['应发工资','实发工资']
                },
                dataZoom: [
                    {
                        type: "slider",
                        textStyle:{
                            color:"#fff"
                        },
                        bottom:0,
                        realtime: true, //拖动滚动条时是否动态的更新图表数据
                        height: 12, //滚动条高度
                        start: 50, //滚动条开始位置（共100等份）
                        end: 100 //结束位置（共100等份）
                    },
                    {
                        type: "inside",
                        realtime: true, //拖动滚动条时是否动态的更新图表数据
                        height: 25, //滚动条高度
                        start: 50, //滚动条开始位置（共100等份）
                        end: 100 //结束位置（共100等份）
                    }
                ],
                xAxis: [
                    {
                        type: 'category',
                        // data: ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8'],
                        data:data.xAxis,
                        axisLabel: {    //重点在这一块，其余可以忽略
                            interval: 0,   //这个一定要有，别忘记了
                            rotate: 25,
                            textStyle: {
                                color: '#fff',
                                fontSize: 10
                            }
                        },
                        splitLine :{    //网格线
                            show:false //隐藏或显示
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '工资(万元)',
                        min: 0,
                        // max: 250,
                        // interval: 50,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '应发工资',
                        type: 'bar',
                        // data: [20, 35, 26, 15, 40, 65, 75, 70],
                        data:yfData,
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return '#44A6DF'
                                }
                            }
                        }
                    },
                    {
                        name: '实发工资',
                        type: 'bar',
                        // data: [20, 29, 25, 10, 33, 60, 70, 65],
                        data:sfData,
                        itemStyle: {       
                            normal: {
                                color: function (params) {
                                    return '#009688'
                                }
                            }
                        }
                    }
                ]
            };
            echartsMap.setOption(optionMap);
        }

        // echarts 窗口缩放自适应
        $(window).resize(function(){
            echartsDataset.resize();
            echartsMap.resize();
        });

    });
</script>
</body>
</html>
